<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WebSocket 测试页面</title>
  <style>
    .btn-group{
      display: inline-block;
    }
  </style>
</head>
<body style="background-color: #262626">
<h2 style="color: #ffffff;text-align: center;background-color: #434343;border-radius: 10px;"> WebSocket网关连接测试页面 </h2>
<h4 style="color: #ffffff">消息格式：{ "appId": "test_app", "groupId": "test_group", "userId": "test_user", "content": "ws_test", "type": 1 }</h4>
<input type='text' value='ws://127.0.0.1:8000/chat/message/broadcast/test_app/test_gateway' class="form-control" style='width:70%;font-weight: 400;font-size: 20px;;background-color: #434343;border-radius: 5px;color: white;display:inline;margin-right: 5px;'
       id='wsaddr' />
<div class="btn-group" >
  <button type="button" class="btn btn-default" onclick='addsocket();' style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">连接</button>
  <button type="button" class="btn btn-default" onclick='closesocket();' style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">断开</button>
  <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")' style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">清空</button>
</div>
<div class="row">
  <div id="output" style="border:1px solid #ccc;height:400px;overflow: auto;margin: 20px 0;background-color: #000000;color: white;font-weight: 400;border-radius: 5px;"></div>
  <input type="text" id='message' class="form-control" style='width:70%;font-weight: 400;font-size: 20px;;background-color: #434343;color: white;margin-right: 5px;border-radius: 5px;' placeholder="待发信息" onkeydown="en(event);">
  <span class="input-group-btn">
                <button class="btn btn-default" type="button" onclick="doSend();" style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">发送</button>
            </span>
</div>
</div>
</body>

<script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  function formatDate(now) {
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +
            " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
                    second = second < 10 ? ("0" + second) : second);
  }
  var output;
  var websocket;

  function init() {
    output = document.getElementById("output");
    testWebSocket();
  }

  function addsocket() {
    var wsaddr = $("#wsaddr").val();
    if (wsaddr == '') {
      alert("请填写websocket的地址");
      return false;
    }
    StartWebSocket(wsaddr);
  }

  function closesocket() {
    websocket.close();
  }

  function StartWebSocket(wsUri) {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
      onOpen(evt)
    };
    websocket.onclose = function(evt) {
      onClose(evt)
    };
    websocket.onmessage = function(evt) {
      onMessage(evt)
    };
    websocket.onerror = function(evt) {
      onError(evt)
    };
  }

  function onOpen(evt) {
    writeToScreen("<span style='color:#f5222d'>WebSocket连接成功</span>");
  }

  function onClose(evt) {
    writeToScreen("<span style='color:#f5222d'>WebSocket连接断开</span>");
    websocket.close();
  }

  function onMessage(evt) {
    writeToScreen('<span style="color:#1890ff">服务端回应&nbsp;' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
            evt.data + '</span>');
  }

  function onError(evt) {
    writeToScreen('<span style="color: #f5222d;">发生错误:</span> ' + evt.data);
  }

  function doSend() {
    var message = $("#message").val();
    if (message == '') {
      alert("请填写发送信息");
      $("#message").focus();
      return false;
    }
    if (typeof websocket === "undefined") {
      alert("WebSocket还未连接或连接失败");
      return false;
    }
    if (websocket.readyState == 3) {
      alert("WebSocket已经关闭，请重新连接");
      return false;
    }
    console.log(websocket);
    $("#message").val('');
    writeToScreen('<span style="color:#52c41a">你发送的信息&nbsp;' + formatDate(new Date()) + '</span><br/>' + message);
    websocket.send(message);
  }

  function writeToScreen(message) {
    var div = "<div class='newmessage'>" + message + "</div>";
    var d = $("#output");
    var d = d[0];
    var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
    $("#output").append(div);
    if (doScroll) {
      d.scrollTop = d.scrollHeight - d.clientHeight;
    }
  }

  function en(event) {
    var evt = evt ? evt : (window.event ? window.event : null);
    if (evt.keyCode == 13) {
      doSend()
    }
  }
</script>

</html>
